<template>
    <section class="allAssessmentIndex">
        <div class="root">
            <el-tabs  v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="第一季度" name="第一季度"></el-tab-pane>
                <el-tab-pane label="第二季度" name="第二季度"></el-tab-pane>
                <el-tab-pane label="第三季度" name="第三季度"></el-tab-pane>
                <el-tab-pane label="第四季度" name="第四季度"></el-tab-pane>
            </el-tabs>
            <div v-loading="listLoad">
                <div style="display: flex;" class="tableBgC">
                    <div style="flex-basis: 200px;line-height: 70px">项目类别</div>
                    <span style="flex: 1">
                    <div class="second" style="display: flex">
                        <span style="flex-basis: 250px;line-height: 70px">项目内容</span>
                        <span style="flex-basis: 100px;line-height: 70px">得分</span>
                        <div class="village-score" @scroll="orderScroll" style="overflow-x: scroll">
                            <div :style="{width: `${130 * list[0].kpiTownQuotas[0].kpiVillageQuotas.length}px`}">
                                <span style="width: 130px;display: inline-block" v-for="grandItem in list[0].kpiTownQuotas[0].kpiVillageQuotas" >{{grandItem.districtName.replace(/支部/,'')}}</span>
                            </div>
                        </div>
                    </div>
                </span>
                </div>
                <div v-for="(item,index) in list" class="first-level-content">
                    <div style="flex-basis: 200px;min-width: 200px">{{item.quotaName}}</div>
                    <span style="flex: 1">
                    <div v-for="(subItem,subIndex) in item.kpiTownQuotas" class="second" style="display: flex" >
                        <span style="flex-basis: 250px;display: flex">
                            <div style="flex-basis: 280px">{{subItem.quotaName}}</div>
                        </span>
                        <div style="flex-basis: 100px;display: flex;align-items: center;justify-content: center">
                            <span>{{subItem.score||0}}</span>
                            <!--  <el-input-number :disabled="true" size="large" class="score-content" v-model="subItem.score" controls-position="right" :min="1" :max="10"></el-input-number>-->
                        </div>
                        <div class="village-score" @scroll="orderScroll">
                            <div class="actual-container" :style="{width: `${130 * subItem.kpiVillageQuotas.length}px`}">
                                <div v-for="grandItem in subItem.kpiVillageQuotas" style="width: 130px;display: inline-block;text-align: center;">{{grandItem.score||0}}
                                </div>
                            </div>
                        </div>
                    </div>
                </span>
                </div>
            </div>

        </div>
    </section>
</template>

<script>
    export default {
        name: "AssessmentIndex",
        data(){
            return{
                activeName:'第一季度',
                list:[],
                user:{},
                listLoad:false,
            }
        },
        methods:{
            orderScroll(e) {
               let r = document.querySelectorAll('.village-score');
               r.forEach(item => {
                   item.scrollLeft =  e.target.scrollLeft;
               })
            },
            showData(districtId, firstLevelType,activeName){
                this.listLoad = true;
                let param = {districtId: districtId, parentQuotaId: firstLevelType};
                param.quarter = activeName;
                this.$http('post',`identity/kPITownQuota/getAll`, param, false).then(data=>{
                    this.list = [];
                    this.list = data;
                    this.listLoad = false;
                }).catch(()=>{
                    this.listLoad = false;
                })
            },
            handleClick(tab, event) {
                this.activeName = tab.label;
                this.showData(this.user.districtId,'01',this.activeName);
            }
        },
        created() {
            this.user = JSON.parse(sessionStorage.getItem("userInfo"));
            this.showData(this.user.districtId, '01',this.activeName);
        }
    }
</script>

<style>
    .allAssessmentIndex .first-level-content {
        display: flex;padding: 10px 0;
        border-right: 1px solid #2B2B2B;
        border-left: 1px solid #2B2B2B;
        border-bottom: 1px solid #2B2B2B;
    }

</style>

<style scoped>
    .allAssessmentIndex {
        text-align: center;
    }
    .allAssessmentIndex span {
      /*  border: 1px red solid;*/
        vertical-align: top;
    }
    .allAssessmentIndex .village-score {
        flex: 1;
        display: inline-block;
        overflow-x: hidden;
        line-height: 70px;
    }
    .allAssessmentIndex .actual-container {
        text-align: left;
        float: left;
    }
    .allAssessmentIndex .root .tableBgC{
        background: linear-gradient(60deg, #66aabb, #43a047);
        box-shadow: 0 12px 20px -10px rgba(76, 175, 80, .28), 0 4px 20px 0 rgba(0, 0, 0, .12), 0 7px 8px -5px rgba(76, 175, 80, .2);
        border-radius: 10px;
        height: 70px;
        font-weight: bold;
        font-size: 18px;
        color: rgba(255, 255, 255, .9);
    }
    .allAssessmentIndex .score-content {
        width: 70px;
    }

</style>
